<template>
    <div
      class="circle-button"
      :class="{ 'button-pressed': isPressed }"
      @mousedown="handleMouseDown"
      @mouseup="handleMouseUp"
      @mouseleave="handleMouseUp"
      @touchstart.prevent="handleTouchStart"
      @touchend="handleTouchEnd"
      @touchcancel="handleTouchEnd"
    >
      {{ buttonText }}
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const props = defineProps({
    buttonText: {
      type: String,
      default: '按钮'
    }
  });
  
  const isPressed = ref(false);
  const touchTimeout = ref(null);
  
  const emit = defineEmits(['long-press-start', 'long-press', 'release']);
  
  const handleMouseDown = () => {
    isPressed.value = true;
    emit('long-press-start');
    startLongPressTimer();
  };
  
  const handleMouseUp = () => {
    isPressed.value = false;
    clearLongPressTimer();
    emit('release');
  };
  
  const handleTouchStart = () => {
    isPressed.value = true;
    emit('long-press-start');
    startLongPressTimer();
  };
  
  const handleTouchEnd = () => {
    isPressed.value = false;
    clearLongPressTimer();
    emit('release');
  };
  
  const startLongPressTimer = () => {
    touchTimeout.value = setTimeout(() => {
      emit('long-press');
    }, 500); // 500毫秒后触发长按事件，可根据需要调整
  };
  
  const clearLongPressTimer = () => {
    clearTimeout(touchTimeout.value);
  };
  </script>
  
  <style scoped>
  .circle-button {
    width: 100px;
    height: 100px;
    background-color: #4caf50;
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 24px;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s;
  }
  .button-pressed {
    background-color: #45a049;
  }
  </style>